<!doctype html>
<html>
<head>
	<meta charset="utf8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
	<link rel="stylesheet" href="css/prettify.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/prettify.js"></script>
	<script src="js/bootstrap.min.js"></script>

</head>

<body data-spy="scroll" data-target=".spy-nav" onload="prettyPrint()" data-offset="60">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<div class="container">
				<a href="index.html" class="brand">ease Documentation</a>
				<ul class="nav">
					<li>
						<a href="index.html">Overview</a>
					</li>
					<li class="active">
						<a href="structure.html">Structure</a>
					</li>
					<li>
						<a href="files.html">File structure</a>
					</li>
					<li>
						<a href="credits.html">Credits</a>
					</li>
					<li>
						<a href="contact.html">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container" id="main">
		<div class="row">
			<div class="span3 spy-nav">
				<ul class="nav nav-list nav-left" data-spy="affix" data-offset-top="0">
					<li class='active'>
						<a href="#layouts">
							<i class="icon-chevron-right"></i>
							Layouts
						</a>
					</li>
					<li>
						<a href="#gridstructure">
							<i class="icon-chevron-right"></i>
							Grid-structure
						</a>
					</li>
					<li>
						<a href="#topbar">
							<i class="icon-chevron-right"></i>
							Topbar
						</a>
					</li>
					<li>
						<a href="#navigation">
							<i class="icon-chevron-right"></i>
							Navigation
						</a>
					</li>
					<li>
						<a href="#forms">
							<i class="icon-chevron-right"></i>
							Forms
						</a>
					</li>
					<li>
						<a href="#tables">
							<i class="icon-chevron-right"></i>
							Tables
						</a>
					</li>
					<li>
						<a href="#interfaceelements">
							<i class="icon-chevron-right"></i>
							Interface elements
						</a>
					</li>
					<li>
						<a href="#charts">
							<i class="icon-chevron-right"></i>
							Charts
						</a>
					</li>
				</ul>
			</div>
			<div class="span9">
				<div id="layouts">
					<div class="page-header">
						<h1>Layouts</h1>
					</div>
					<p>
						Ease comes with 4 possible layouts. You can easily change them with just one adjustment.
					</p>
					<p>
						<h4>Default layout</h4>
						The default layout is: navigation fixed &amp; layout fluid.
						<pre class='prettyprint'>&lt;body data-layout="fixed"&gt;</pre>
						<h4>Navigation fluid</h4>
						To make the navigation not stay in place and just scroll with the page use this snippet:
						<pre class='prettyprint'>&lt;body&gt;</pre>
						<h4>Fixed layout</h4>
						To use the 1170px wide fixed layout use this snippet:
						<pre class='prettyprint'>&lt;body data-layout-width="fixed"&gt;</pre>
						<h4>Fixed layout &amp; fixed navigation</h4>
						<pre class='prettyprint'>&lt;body data-layout="fixed" data-layout-width="fixed"&gt;</pre>
					</p>
				</div>
				<div id="gridstructure">
					<div class="page-header">
						<h1>Grid structure</h1>
					</div>
					<p>
						The theme uses the default bootstrap grid system. Read more about it here : <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">http://twitter.github.com/bootstrap/scaffolding.html#gridSystem</a>.
					</p>
					<p>
						<h4>Page structure</h4>
					</p>
					<pre class="prettyprint linenums">
&lt;body data-layout=&quot;fixed&quot;&gt;
  &lt;div id=&quot;top&quot;&gt; 
    &lt;!-- Topbar --&gt;
  &lt;/div&gt;

  &lt;div id=&quot;main&quot;&gt;
    &lt;div id=&quot;navigation&quot;&gt;
	  &lt;!-- Navigation --&gt;
    &lt;/div&gt;
    &lt;div id=&quot;content&quot;&gt;
	  &lt;!-- Content --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</pre>
			<h4>Widget box structure</h4>
			<pre class="prettyprint linenums">
&lt;div class=&quot;row-fluid&quot;&gt;
  &lt;div class=&quot;span12&quot;&gt;
    &lt;div class=&quot;box&quot;&gt;
      &lt;div class=&quot;box-head&quot;&gt;
        &lt;i class=&quot;icon-reorder&quot;&gt;&lt;/i&gt;
        &lt;span&gt;Headline&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;box-body&quot;&gt;
        Content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>You can also use the class <code>box-body-nopadding</code>. That class will remove the padding from the widget box. This can be useful for example for tables. Go through the theme and see where it is used.</p>
<h4>No padding on widget box</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;box-body box-body-nopadding&quot;&gt;
  Content
&lt;/div&gt;</pre>
			</div>
			<div id="topbar">
				<div class="page-header">
					<h1>Topbar</h1>
				</div>
				<h4>Topbar</h4>
				<pre class="prettyprint linenums">
&lt;div id=&quot;top&quot;&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;div class=&quot;pull-left&quot;&gt;
      &lt;a href=&quot;#&quot; id=&quot;brand&quot;&gt;
        &lt;span&gt;&lt;/span&gt;
        ease
      &lt;/a&gt;
      &lt;div class=&quot;collapse-me&quot;&gt;
        &lt;!-- Left Buttons --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;pull-right&quot;&gt;
      &lt;!-- Right buttons --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>All buttons inside the <code>&lt;div class=&quot;collapse-me&quot;&gt;</code> will be hidden if the width of the browser is lower than 989px. At that position the responsive navigation will be placed.</p>
<h4>Topbar button</h4>
<pre class="prettyprint linenums">
&lt;a href=&quot;messages.html&quot; class=&quot;button&quot;&gt;
  &lt;i class=&quot;icon-comment icon-white&quot;&gt;&lt;/i&gt;
  Messages
  &lt;span class=&quot;badge badge-important&quot;&gt;21&lt;/span&gt;
&lt;/a&gt;</pre>
<h4>Topbar dropdown button</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;btn-group&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;button dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
    &lt;i class=&quot;icon-white icon-user&quot;&gt;&lt;/i&gt;
    John Doe
    &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;div class=&quot;dropdown-menu pull-right&quot;&gt;
    &lt;div class=&quot;right-details&quot;&gt;
      &lt;h6&gt;Logged in as&lt;/h6&gt;
      &lt;span class=&quot;name&quot;&gt;John Doe&lt;/span&gt;
      &lt;span class=&quot;email&quot;&gt;john.doe@example.com&lt;/span&gt;
      &lt;a href=&quot;#&quot; class=&quot;highlighted-link&quot;&gt;
        Need help?
      &lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            Getting started
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
			</div>
			<div id="navigation">
				<div class="page-header">
					<h1>Navigation</h1>
				</div>
				<p>You find a basic overview of the navigation.</p>
				<h4>Basic navigation</h4>
				<pre class="prettyprint linenums">
&lt;div id=&quot;navigation&quot;&gt;
  &lt;div class=&quot;search&quot;&gt;
    &lt;!-- Search --&gt;
  &lt;/div&gt;
  &lt;ul class=&quot;mainNav&quot; data-open-subnavs=&quot;multi&quot;&gt;
    &lt;!-- Main navigation --&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;status button&quot;&gt;
    &lt;!-- Bottom status --&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>The navigation is possible to limit the number of open subnavigations. You can either set it to multi or single. If single is entered the currently opened subnavigation will be automatically closed if the user opens another subnavigation. Of course you can remove the Bottom status and the Search if you don't need it. The structure of an element of the main navigation is the following.</p>
<h4>Basic navigation element</h4>
<pre class="prettyprint linenums">
&lt;li&gt;
  &lt;a href=&quot;dashboard.html&quot;&gt;
    &lt;i class=&quot;icon-home icon-white&quot;&gt;&lt;/i&gt;
    &lt;span&gt;
      Dashboard
    &lt;/span&gt;
  &lt;/a&gt;
&lt;/li&gt;</pre>
<h4>Dropdown navigation element</h4>
<pre class="prettyprint linenums">
&lt;li&gt;
  &lt;a href=&quot;#&quot;&gt;
    &lt;i class=&quot;icon-edit icon-white&quot;&gt;&lt;/i&gt;
    &lt;span&gt;
      Forms
    &lt;/span&gt;
    &lt;span class=&quot;label&quot;&gt;4&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class=&quot;subnav&quot;&gt;
    &lt;li&gt;
      &lt;a href=&quot;basic-forms.html&quot;&gt;
        Basic forms
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;</pre>
<h4>Search structure</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;search&quot;&gt;
  &lt;i class=&quot;icon-search icon-white&quot;&gt;&lt;/i&gt;
  &lt;form action=&quot;search-page.html&quot; method=&quot;get&quot;&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Search here&quot; /&gt;
  &lt;/form&gt;
  &lt;div class=&quot;dropdown&quot;&gt;
    &lt;a href=&quot;#&quot; class='search-settings dropdown-toggle' data-toggle=&quot;dropdown&quot;&gt;
      &lt;i class=&quot;icon-cog icon-white&quot;&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu&quot;&gt;
      &lt;li class='sort-by'&gt;
        Sort by 
        &lt;span class='filter'&gt;
          Categories
        &lt;/span&gt;
        
        &lt;span class=&quot;order&quot;&gt;
          A-Z
        &lt;/span&gt;
      &lt;/li&gt;
      &lt;li class=&quot;heading&quot;&gt;
        Filter categories
      &lt;/li&gt;
      &lt;li class='filter active'&gt;
        Categories
      &lt;/li&gt;
      &lt;li class=&quot;filter&quot;&gt;
        Countries
      &lt;/li&gt;
      &lt;li class=&quot;filter&quot;&gt;
        Likes
      &lt;/li&gt;
      &lt;li class=&quot;heading&quot;&gt;
        Sorting order
      &lt;/li&gt;
      &lt;li class='order active'&gt;
        Ascending
      &lt;/li&gt;
      &lt;li class=&quot;order&quot;&gt;
        Descending
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>The <code>&lt;div class=&quot;dropdown&quot;&gt;...&lt;/div&gt;</code> inside the search div is for the settings. If you don't want to provide search-settings you can delete that.</p>
			</div>
			<div id="forms">
				<div class="page-header">
					<h1>Forms</h1>
				</div>
				<p>The forms are structured like bootstrap forms. You will find everthing about it here: <a href="http://twitter.github.com/bootstrap/base-css.html#forms">http://twitter.github.com/bootstrap/base-css.html#forms</a>.</p>
				<h4>Bordered Form</h4>
				<p>This theme provides a custom, bordered form. simply add the class <code>form-bordered</code> to the <code>&lt;form&gt;</code> element. Example below.</p>
<pre class="prettyprint linenums">
&lt;form action=&quot;#&quot; method=&quot;POST&quot; class='form-horizontal form-bordered'&gt;
  &lt;div class=&quot;control-group&quot;&gt;
    &lt;label for=&quot;t&quot; class=&quot;control-label&quot;&gt;
      Text input
    &lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; name=&quot;t&quot; id=&quot;t&quot; placeholder=&quot;Text input&quot; class=&quot;input-xlarge&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-actions&quot;&gt;
    &lt;button type=&quot;submit&quot; class=&quot;button button-basic-blue&quot;&gt;
      Save changes
    &lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;button button-basic&quot;&gt;
      Cancel
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
<p>All other basic form elements are used the same way like in the bootstrap documentation. I suggest to read it. You find the link above.</p>
<h4>TagsInput</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;span12&quot;&gt;
  &lt;input type=&quot;text&quot; name=&quot;textfield&quot; id=&quot;textfield&quot; class=&quot;tagsinput&quot; value=&quot;PHP,Laravel,Java&quot;&gt;
&lt;/div&gt;</pre>
<h4>Select with search</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;input-xlarge&quot;&gt;
  &lt;select name=&quot;select&quot; id=&quot;select&quot; class='chosen-select'&gt;
    &lt;option value=&quot;1&quot;&gt;Option-1&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;</pre>
<p>The class <code>chosen-select</code> makes the element searchable.</p>
<h4>Spinner</h4>
<pre class="prettyprint linenums">
&lt;input type=&quot;text&quot; name=&quot;textfield&quot; id=&quot;textfield&quot; value=&quot;3&quot; class=&quot;spinner input-mini&quot;&gt;</pre>
<h4>Custom file upload</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;fileupload fileupload-new&quot; data-provides=&quot;fileupload&quot;&gt;
  &lt;div class=&quot;input-append&quot;&gt;
    &lt;div class=&quot;uneditable-input span3&quot;&gt;
      &lt;i class=&quot;icon-file fileupload-exists&quot;&gt;&lt;/i&gt;
      &lt;span class=&quot;fileupload-preview&quot;&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;span class=&quot;btn btn-file&quot;&gt;
      &lt;span class=&quot;fileupload-new&quot;&gt;
        Select file
      &lt;/span&gt;
      &lt;span class=&quot;fileupload-exists&quot;&gt;
        Change
      &lt;/span&gt;
      &lt;input type=&quot;file&quot; /&gt;
    &lt;/span&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn fileupload-exists&quot; data-dismiss=&quot;fileupload&quot;&gt;
      Remove
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<h4>File upload with thumbnail</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;fileupload fileupload-new&quot; data-provides=&quot;fileupload&quot;&gt;
  &lt;div class=&quot;fileupload-new thumbnail&quot; style=&quot;width: 200px; height: 150px;&quot;&gt;
    &lt;img src=&quot;http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;fileupload-preview fileupload-exists thumbnail&quot; style=&quot;max-width: 200px; max-height: 150px; line-height: 20px;&quot;&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;span class=&quot;btn btn-file&quot;&gt;
      &lt;span class=&quot;fileupload-new&quot;&gt;
        Select image
      &lt;/span&gt;
      &lt;span class=&quot;fileupload-exists&quot;&gt;
        Change
      &lt;/span&gt;
      &lt;input type=&quot;file&quot; /&gt;
    &lt;/span&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn fileupload-exists&quot; data-dismiss=&quot;fileupload&quot;&gt;
      Remove
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<h4>Dual multiselect</h4>
<pre class="prettyprint linenums">
&lt;select multiple=&quot;multiple&quot; id=&quot;my-select&quot; name=&quot;my-select[]&quot; class='multiselect'&gt;
  &lt;option value='elem_1'&gt;
    elem 1
  &lt;/option&gt;
  &lt;option value='elem_2'&gt;
    elem 2
  &lt;/option&gt;
&lt;/select&gt;</pre>
<h4>Slider</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;slider&quot; data-step=&quot;25&quot; data-min=&quot;0&quot; data-max=&quot;250&quot;&gt;
  &lt;div class=&quot;amount&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;slide&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<h4>Range slider</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;slider&quot; data-step=&quot;5&quot; data-min=&quot;0&quot; data-max=&quot;75&quot; data-range=&quot;true&quot; data-rangestart=&quot;15&quot; data-rangestop=&quot;45&quot;&gt;
  &lt;div class=&quot;amount&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;slide&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<p>As you can see the sliders are completly customized using <code>data-*</code> attributes.</p>
<h4>Uniform elements</h4>
<p>To use the plugin <code>Uniform</code> you need to add the class <code>uniform-me</code> to the specific element. It will be styled automatically.</p>
<h4>Masked inputs</h4>
<pre class="prettyprint linenums">
&lt;input type=&quot;text&quot; name=&quot;textfield&quot; id=&quot;textfield&quot; class=&quot;input-xlarge mask_date&quot;&gt;</pre>
<p>The maskedInput definitions are done in javascript. Simply add the correct class you defined in javascript to the element. In this example I used <code>mask_date</code>. The javascript to that masked input is:</p>
<pre class="prettyprint linenums">
$(".mask_date").mask("9999/99/99");</pre>
<p>A <code>9</code> stands for any number and an <code>A</code> stand for any alpha-character. Read more about it on the plugin page which can be found here <a href="credits.html">Credits</a>.</p>
<h4>Date-/time-/colorpicker</h4>
<pre class="prettyprint linenums">
&lt;input type=&quot;text&quot; name=&quot;textfield&quot; id=&quot;textfield&quot; class=&quot;input-medium datepick&quot;&gt;</pre>
<p>For the datepicker use the class <code>datepick</code>. For timepicker <code>timepick</code> and for the colorpicker <code>colorpick</code>.</p>
<h4>CL editor</h4>
<pre class="prettyprint linenums">
&lt;form action=&quot;#&quot; method=&quot;POST&quot; class='form-wysiwyg'&gt;
  &lt;textarea name=&quot;cl&quot; class='cleditor span12' rows=&quot;5&quot;&gt;&lt;/textarea&gt;
&lt;/form&gt;</pre>
<h4>CK editor</h4>
<pre class="prettyprint linenums">
&lt;form action=&quot;#&quot; method=&quot;POST&quot; class='form-wysiwyg'&gt;
  &lt;textarea name=&quot;ck&quot; class='ckeditor span12' rows=&quot;5&quot;&gt;&lt;/textarea&gt;
&lt;/form&gt;</pre>
<h4>Multi file upload</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;plupload&quot;&gt;&lt;/div&gt;</pre>
<h4>Form validation</h4>
<pre class="prettyprint linenums">
&lt;form action=&quot;#&quot; method=&quot;POST&quot; class='form-horizontal form-bordered form-validate'&gt;
  &lt;div class=&quot;control-group&quot;&gt;
    &lt;label for=&quot;t&quot; class=&quot;control-label&quot;&gt;
      Text input
    &lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; name=&quot;t&quot; id=&quot;t&quot; data-rule-required=&quot;true&quot; data-rule-minlength=&quot;2&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
<p>You don't need any own javascript to validate your forms. Add the class <code>form-validate</code> to you form and use the <code>data-*</code> attributes. Go through the validation page to see some rules or visit the plugins page.</p>
<h4>Form wizard</h4>
<pre class="prettyprint linenums">
&lt;form action=&quot;#&quot; method=&quot;POST&quot; class='form-horizontal form-bordered form-wizard' id=&quot;ss&quot;&gt;
  &lt;!-- Wizard --&gt;
&lt;/form&gt;</pre>
<h4>Wizard step</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;step&quot; id=&quot;firstStep&quot;&gt;
  &lt;ul class=&quot;wizard-steps wizard-style-2 steps-3&quot;&gt;
    &lt;li class='active'&gt;
      &lt;div class=&quot;single-step&quot;&gt;
        &lt;span class=&quot;title&quot;&gt;
          Step 1
        &lt;/span&gt;
        &lt;span class=&quot;circle&quot;&gt;
          &lt;span class=&quot;active&quot;&gt;
          &lt;/span&gt;
        &lt;/span&gt;
        &lt;span class=&quot;description&quot;&gt;
          Basic information
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;control-group&quot;&gt;
    &lt;label for=&quot;firstname&quot; class=&quot;control-label&quot;&gt;
      First name
    &lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; name=&quot;firstname&quot; id=&quot;firstname&quot; class=&quot;input-xlarge&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>The class <code>wizard-style-2</code> indicates a theme for the wizard. If you remove that class the wizard will be styled differently. The class <code>steps-3</code> is used for the number of steps. That is needed to calculate the width of the step-elements correctly. So if you want 2 steps simply use the class <code>steps-2</code>. I predefined 5 classes <code>steps-1..to..steps-5</code>.</p>
<p>Every step needs its unique <code>id</code>. Inside the step is the step overview (<code>wizard-steps</code>). If you don't need an overview you can leave it out. Steps can also be validated using the form validation from above.</p>
			</div>
			<div id="tables">
				<div class="page-header">
					<h1>Tables</h1>
				</div>
				<p>Tables use the basic bootstrap structure. You can read more about this here: <a href="http://twitter.github.com/bootstrap/base-css.html#tables">http://twitter.github.com/bootstrap/base-css.html#tables</a>. So I will only demonstrate how to use the customized versions like table-controls and pagination.</p>
<h4>Table with controls</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;highlight-toolbar&quot;&gt;
  &lt;!-- Buttons --&gt;
&lt;/div&gt;</pre>
<h4>Table controls buttons</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;btn-toolbar&quot;&gt;
  &lt;div class=&quot;btn-group&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;button button-basic button-icon&quot; rel=&quot;tooltip&quot; title=&quot;Refresh results&quot;&gt;
      &lt;i class=&quot;icon-refresh&quot;&gt;
      &lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;btn-group&quot;&gt;
    &lt;div class=&quot;dropdown&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;button button-basic button-icon&quot; data-toggle=&quot;dropdown&quot; rel=&quot;tooltip&quot; title=&quot;Mark elements&quot;&gt;
        &lt;i class=&quot;icon-check-empty&quot;&gt;
        &lt;/i&gt;
        &lt;span class=&quot;caret&quot;&gt;
        &lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot;&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot; class='sel-all'&gt;
            All
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot; class='sel-unread'&gt;
            Unread
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>As you can see it uses the default <code>btn-toolbar</code> and <code>btn-group</code> from bootstrap. Everything is structured like in bootstrap. There is just the difference of the <code>btn</code> class which styles them in the custom theme style but of course you could also use the bootstrap buttons. More on buttons will be in the "Icons &amp; buttons" section.</p>
<h4>Table with pagination</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;bottom-table&quot;&gt;
  &lt;div class=&quot;pull-left&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;button button-basic&quot;&gt;
      Another button
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;pull-right&quot;&gt;
    &lt;div class=&quot;pagination pagination-custom&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            &lt;i class=&quot;icon-double-angle-left&quot;&gt;
            &lt;/i&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            1
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class='active'&gt;
          &lt;a href=&quot;#&quot;&gt;
            2
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            3
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            4
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            5
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            &lt;i class=&quot;icon-double-angle-right&quot;&gt;
            &lt;/i&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p>You could replace the pagination with any other interface element. The important container is the <code>&lt;div class=&quot;bottom-table&quot;&gt;...&lt;/div&gt;</code>. It is your choice what you put in there.</p>
<h4>Dynamic table</h4>
<pre class="prettyprint linenums">
&lt;table class=&quot;table dataTable&quot;&gt;&lt;/table&gt;</pre>
<p>Just add the class <code>dataTable</code> to your table and it will become sortable, searchable, limitable and with automatic calculated pagination. How to use dataTables even more you need to visit the plugins page. Of course you could use other table classes like <code>table-hover</code> and <code>table-striped</code></p>
<h4>Sortable table</h4>
<pre class="prettyprint linenums">
&lt;table class=&quot;table dataTable dataTable-noheader dataTable-nofooter&quot;&gt;&lt;/table&gt;</pre>
<p>Actually you create a dynamic table and remove the functions except the sorting.</p>
			</div>
			<div id="interfaceelements">
				<div class="page-header">
					<h1>Interface elements</h1>
				</div>
				<p>You can use the default bootstrap elements. I will demonstrate how to use the custom, theme-specific elements.</p>
<h4>Chat</h4>
<pre class="prettyprint linenums">
&lt;ul class=&quot;messages&quot;&gt;
  &lt;li class=&quot;left&quot;&gt;
    &lt;!-- Left message --&gt;
  &lt;/li&gt;
  &lt;li class=&quot;right&quot;&gt;
    &lt;!-- Right message --&gt;
  &lt;/li&gt;
  &lt;li class=&quot;typing&quot;&gt;
    &lt;span class=&quot;name&quot;&gt;
      John Doe
    &lt;/span&gt;
    is typing 
    &lt;img src=&quot;img/loading.gif&quot; alt=&quot;&quot;&gt;
  &lt;/li&gt;
  &lt;li class=&quot;insert&quot;&gt;
    &lt;div class=&quot;test&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;button button-highlighted&quot;&gt;
        &lt;i class=&quot;icon-camera&quot;&gt;
        &lt;/i&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;text&quot;&gt;
      &lt;div class=&quot;dropup&quot;&gt;
        &lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot; class=&quot;dropdown-toggle&quot;&gt;
          &lt;i class=&quot;icon-caret-up&quot;&gt;
          &lt;/i&gt;
        &lt;/a&gt;
        &lt;div class='dropdown-menu pull-right'&gt;
          &lt;ul class=&quot;smilies&quot;&gt;
            &lt;!-- Smilies --&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type=&quot;text&quot; name=&quot;text&quot; placeholder=&quot;Write here...&quot; class=&quot;input-block-level&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;submit&quot;&gt;
      &lt;input type=&quot;submit&quot; value=&quot;Send&quot; class='button button-highlighted'&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>
<h4>Chat message structure</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;image&quot;&gt;
  &lt;img src=&quot;img/user-1.jpg&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;message&quot;&gt;
  &lt;span class=&quot;name&quot;&gt;
    Johny Doesy
  &lt;/span&gt;
  &lt;p&gt;
    Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi Excepteur eiusmod ex culpa laboris. Lorem ipsum est ut irure ad esse minim ullamco. Lorem ipsum Duis est eu occaecat commodo non dolore cupidatat ut id laborum nisi culpa eu occaecat sit. Lorem ipsum aute laborum nostrud incididunt proident amet. 
  &lt;/p&gt;
  &lt;span class=&quot;time&quot;&gt;
    12 minutes ago
  &lt;/span&gt;
&lt;/div&gt;</pre>
<h4>Gallery</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;gallery nomargin&quot;&gt;
  &lt;div class=&quot;gallery-image&quot;&gt;
    &lt;a href=&quot;img/demo/cyan_sydneyharbourbridge.jpg&quot;&gt;
      &lt;img src=&quot;img/demo/cyan_sydneyharbourbridge.jpg&quot; alt=&quot;&quot;&gt;
    &lt;/a&gt;
    &lt;div class=&quot;details&quot;&gt;
      &lt;span class=&quot;title&quot;&gt;
        Sydney harbour bridge
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<h4>Dynamic gallery (auto positioning)</h4>
<p>It has the same markup like above but it also needs the class <code>gallery-dynamic</code>.</p>
<h4>Quicktask buttons</h4>
<pre class="prettyprint linenums">
&lt;ul class=&quot;quick&quot; data-collapse=&quot;collapse&quot;&gt;
  &lt;li&gt;
    &lt;a href=&quot;#&quot;&gt;
      &lt;img src=&quot;img/icons/statistics.png&quot; alt=&quot;&quot; /&gt;
      &lt;span&gt;
        Check statistics
      &lt;/span&gt;
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>
<p>The images are from the PC Essen iconset which can be found under the credits page.</p>
<h4>Topbar buttons</h4>
<pre class="prettyprint linenums">
&lt;button class='button'&gt;
  Basic button
&lt;/button&gt;
&lt;button class='button button-highlighted'&gt;
  Highlighted
&lt;/button&gt;
&lt;button class='button button-less-round'&gt;
  Less round
&lt;/button&gt;</pre>
<h4>Basic buttons</h4>
<pre class="prettyprint linenums">
&lt;button class='button button-basic'&gt;
  Button
&lt;/button&gt;
&lt;button class='button button-basic-blue'&gt;
  Blue
&lt;/button&gt;
&lt;button class='button button-basic-red'&gt;
  Red
&lt;/button&gt;
&lt;button class='button button-basic-green'&gt;
  Green
&lt;/button&gt;</pre>
<h4>Button with icon</h4>
<pre class="prettyprint linenums">
&lt;button class='button button-basic'&gt;
  &lt;i class=&quot;icon-cog&quot;&gt;&lt;/i&gt;
  Settings
&lt;/button&gt;
&lt;button class='button button-basic'&gt;
  &lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;
  Search
&lt;/button&gt;</pre>
<h4>File management</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;file-manager&quot;&gt;&lt;/div&gt;</pre>
<h4>Calendar</h4>
<pre class="prettyprint linenums">
&lt;div class=&quot;calendar&quot;&gt;&lt;/div&gt;</pre>
			</div>
			<div id="charts">
				<div class="page-header">
					<h1>Charts</h1>
				</div>
<h4>Small charts</h4>	
<pre class="prettyprint linenums">
&lt;ul class=&quot;charts&quot;&gt;
  &lt;li&gt;
    &lt;div class=&quot;chart&quot; data-percent=&quot;76&quot;&gt;
      76%
    &lt;/div&gt;
    &lt;span&gt;
      HDD space
    &lt;/span&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class=&quot;chart&quot; data-percent=&quot;15&quot;&gt;
      15%
    &lt;/div&gt;
    &lt;span&gt;
      Memory used
    &lt;/span&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class=&quot;chart&quot; data-percent=&quot;41&quot;&gt;
      41%
    &lt;/div&gt;
    &lt;span&gt;
      Traffic
    &lt;/span&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>			
<h4>Other charts (flot-plugin)</h4>
<p>It would be too much to describe how to use the flot plugin. Visit the plugins page and read through the readme/tutorial to get an idea how you can use it for your site.</p>
			</div>
		</div>
	</div>
</div>
</body>

</html>


